<template>
  <div class="text-position">
    <div class="text-grid">
      <div
        v-for="(item, key) in positionMap"
        :key="item.title"
        class="grid-item flex justify-center items-center"
        :class="[{ active: item.value == value }]"
        @click="selectItem(item, key)"
      >
        <div class="pointer"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const positionMap = [
  {
    title: '左上',
    value: 'flex-q',
  },
  {
    title: '上中',
    value: 'flex-w',
  },
  {
    title: '右上',
    value: 'flex-e',
  },
  {
    title: '中左',
    value: 'flex-a',
  },
  {
    title: '中',
    value: 'flex-s',
  },
  {
    title: '中右',
    value: 'flex-d',
  },
  {
    title: '下左',
    value: 'flex-z',
  },
  {
    title: '下中',
    value: 'flex-x',
  },
  {
    title: '下右',
    value: 'flex-c',
  },
];

const emits = defineEmits(['update:value', 'onSelect']);

function selectItem(item: { value: any }, key: number) {
  emits('update:value', item.value);
  emits('onSelect', item, key);
}
defineProps({
  value: String,
});
</script>

<style lang="scss" scoped>
.text-position {
  width: 100px;
  height: 100px;
  min-width: 100px;
  border: 1px solid #eee;
  border-radius: var(--border-radius);
  .text-grid {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
  }
  .grid-item {
    cursor: pointer;
    width: 100%;
    height: 100%;
    &:hover {
      background-color: #eee;
    }
  }
  .pointer {
    width: 6px;
    height: 6px;
    background-color: #ddd;
  }
  .active {
    background-color: var(--primary);
    width: 12px;
    height: 12px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    .pointer {
      background-color: var(--primary);
    }
  }
}
</style>
